<script setup>
import { onBeforeMount, reactive, ref, toRef, toRefs } from 'vue';
import { getClusterListHandler as getListHandler, deleteClusterHandler as deleteHandler } from '../../api/deployment.js';
import { ElMessage,ElMessageBox } from 'element-plus';
import Add from './Add.vue';
import { Close,Check } from '@element-plus/icons-vue'
import CodeMirror from '../../components/CodeMirror.vue';
import { obj2Yaml } from '../../utils/utils.js';

const addUserDialog = ref(false)
const defaultMethod = ref("Create")
const data = reactive({
    items: [],
    clusterId: "",
    namespace: "",
    yamlContent: ""
})
const loading = ref(true)

// 获取集群列表
const getList= () =>{
    loading.value=true
    getListHandler().then((response)=>{
        console.log("response:", response.data.data.items)
        data.items=response.data.data.items
        loading.value=false
    })
}
// 删除集群
const deleteItem= (row) =>{
    console.log("当前行的数据：",row)
    ElMessageBox.confirm(
        '确定要删除：' + row.clusterId,
        {
        confirmButtonText: '确认删除',
        cancelButtonText: '取消',
        type: 'warning',
        }
    )
    .then(() => {
        loading.value=true
        deleteClusterHandler(row.id).then((response)=>{
        console.log("response:", response.data.data.items)
          ElMessage({
            message: response.data.message,
            type: 'success',
        })
        getClusterList()
        loading.value=false
        })    
    })
    .catch(() => {
      return
    })
}
const addCluster =()=>{
    data.userForm = {}
    defaultMethod.value="Create"
    addUserDialog.value=true
}
const editCluster =(row)=>{
    console.log("row: ",row)
    defaultMethod.value="Edit"
    addUserDialog.value=true
    data.userForm = row
}
onBeforeMount(()=>{
    getList()
})
const { items, userForm } = toRefs(data)
const closeDialog=()=>{
    getList()
}
const rollback=()=>{
    addUserDialog.value = false
    getList()
}


const showDetail = ref(false)
// 展示Pod详情
const detail = (row) => {
    showDetail.value = true
    // 把当前数据转成yaml
    const yamlData = obj2Yaml(row)
    data.yamlContent = yamlData
}
const {yamlContent} = toRefs(data)

const dialogVisible = false
</script>

<template>
    <div><CodeMirror
        v-model="yamlContent"
        ></CodeMirror></div>
    <el-dialog 
    title="提示"
    destroy-on-close 
    v-bind="dialogVisible"
    width="30%">
    <span>这是一个弹框，升级其功能，能在浏览器可见区域自由拖拽</span>
        <CodeMirror
        v-model="yamlContent"
        ></CodeMirror>
    </el-dialog>
</template>

<style scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.text {
    font-size: 14px;
}
.item {
    margin-bottom: 18px;
}
</style>

